<template>
  <div class="divBox">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline>
            <el-form-item label="用户搜索：" :span="8">
              <el-input
                v-model="tableFrom.keywords"
                placeholder="请输入用户名或用户ID"
                class="selWidth"
                clearable
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="getList(1)"
                />
              </el-input>
            </el-form-item>
            <el-form-item label="审核状态：" style="margin-left:40px">
              <el-select
                v-model="tableFrom.status"
                placeholder="请选择"
                class="filter-item selWidth mr20"
                @change="getList(1)"
                clearable
              >
                <el-option label="未审核" :value="0" />
                <el-option label="已审核" :value="1" />
                <el-option label="已拒绝" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-time
              style="position: absolute;right: 60px;margin-top: 8px;">
              <el-button slot="append" @click="xinzeng">新增报名</el-button>
            </el-form-time>
            <!-- <el-form-item label="门店名称：" style="margin-left:50px">
              <el-select v-model="tableFrom.status" placeholder="请选择门店" clearable class="selWidth" @change="seachList">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in switchData" :key="index"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        ref="multipleTable"
      >
        <el-table-column
          label="用户排名"
          prop="rank"
          min-width="50"
          align="center"
        />
        <el-table-column
          label="用户ID"
          prop="memberId"
          min-width="100"
          align="center"
        />
        <el-table-column label="用户头像" min-width="80" align="center">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名称"
          prop="name"
          min-width="100"
          align="center"
        />
        <!-- <el-table-column
          label="所属门店"
          prop="title"
          min-width="100"
          align="center"
        /> -->
        <el-table-column
          label="手机号"
          prop="phone"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="总得票数"
          prop="votesNumber"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="总投票人数"
          prop="votedNumber"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="参与投票状态"
          prop="votedNumber"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待审批</span>
            <span v-else>{{
              scope.row.status == 1 ? "已参赛" : "已拒绝"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="130"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <router-link :to="{ path:'/marketing/vote/xiang?id=' + scope.row.id}">
              <el-button type="text" size="small">编辑</el-button>
            </router-link> -->
            <!-- <router-link :to="{ path:'/marketing/vote/qing?id=' + scope.row.id}">
              <el-button type="text" size="small">查看详情</el-button>
            </router-link> -->
            <el-button
              type="text"
              size="small"
              @click="shenShow(scope.row.id)"
              v-if="scope.row.status == 0"
              >报名审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handShow(scope.row.id)"
              v-else
              >查看详情</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="xiugai(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="delect(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block mb20">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- <el-dialog title="投票详情" :visible.sync="dialogTableVisible">
                    <el-table :data="gridData">
                        <el-table-column property="date" label="日期" align="center"></el-table-column>
                        <el-table-column property="name" label="姓名" align="center"></el-table-column>
                        <el-table-column property="address" label="优惠卷ID" align="center"></el-table-column>
                        <el-table-column property="statue" label="状态" align="center"></el-table-column>
                    </el-table>
    </el-dialog> -->
    <el-dialog
      title="投票详情"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
    >
      <el-table
        v-loading="LogLoading"
        border
        :data="tableDataLog.data"
        style="width: 100%"
      >
        <el-table-column prop="nickname" align="center" label="投票人昵称" />
        <el-table-column prop="member_id" label="投票人ID" align="center" />
        <el-table-column prop="votedNumber" label="投票数量" align="center"
          ><template slot-scope="scope">
            <span>{{ 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_time" label="投票时间" align="center">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableFromLog.limit"
          :current-page="tableFromLog.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDataLog.total"
          @size-change="handleSizeChangeLog"
          @current-change="pageChangeLog"
        />
      </div>
    </el-dialog>
    <el-dialog
      title="新增报名"
      :visible.sync="baoming"
      v-if="baoming"
      @close='handleCloseExtension'
    >
    <el-form class="formExtension mt20" ref="formExtension" :model="formExtension" :rules="ruleInline" label-width="120px"
               @submit.native.prevent v-loading="loading">
        <el-form-item label="用户头像：" prop="image" style="margin-bottom:25px">
          <div class="upLoadPicBox" @click="modalPicTap1">
            <div v-if="formExtension.image" class="pictrue"><img :src="formExtension.image" class="touxiang"></div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="用户手机号：" prop="phone" v-if="formExtension.phone" style="margin-bottom:25px">
          <div>
            <span>{{formExtension.phone}}</span>
          </div>
        </el-form-item>
        <el-form-item label="用户姓名：" prop="name" style="margin-bottom:25px">
                <el-input v-model="formExtension.name"  placeholder="请输入用户姓名"/>
        </el-form-item>
        <el-form-item label="个人宣言：" prop="rules" style="margin-bottom:25px">
                <el-input v-model="formExtension.rules" type="textarea" placeholder="请输入用户宣言"/>
        </el-form-item>
        <el-form-item label="投票个人头像：" prop="userimage" style="margin-bottom:25px">
              <div class="upLoadPicBox" @click="modalPicTap('1')">
                <div v-if="userimage" class="pictrue" style="width:60px;height:60px;"><img :src="userimage" style="border-radius:5px"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onSubExtension('formExtension')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改报名人信息 -->
    <el-dialog
      title="修改报名信息"
      :visible.sync="baomingxin"
      v-if="baomingxin"
      @close='handleCloseExtensionxin'
    >
    <el-form class="formExtension mt20" ref="formExtension" :model="formExtension" label-width="120px"
               @submit.native.prevent v-loading="loading">
        <el-form-item label="用户手机号：" prop="phone" v-if="phone" style="margin-bottom:25px">
          <div>
            <span>{{phone}}</span>
          </div>
        </el-form-item>
        <el-form-item label="用户姓名：" prop="name" style="margin-bottom:25px">
                <el-input v-model="name"  placeholder="请输入用户姓名"/>
        </el-form-item>
        <el-form-item label="个人宣言：" prop="rules" style="margin-bottom:25px">
                <el-input v-model="rules" type="textarea" placeholder="请输入用户宣言"/>
        </el-form-item>
        <el-form-item label="投票个人头像：" prop="userimage" style="margin-bottom:25px">
              <div class="upLoadPicBox" @click="modalPicTap('1')">
                <div v-if="userimage" class="pictrue" style="width:60px;height:60px;"><img :src="userimage" style="border-radius:5px"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">

          <el-button type="primary" @click="onSubExtensionxiu('formExtension')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 用户列表 -->
    <el-dialog
      title="用户列表"
      :visible.sync="userVisible"
      width="900px">
      <user-list v-if="userVisible" @getTemplateRow="getTemplateRow"></user-list>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userVisible = false">取 消</el-button>
        <el-button type="primary" @click="userVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import userList from '@/components/userList'
import {
  bargainListApi,
  bargainDeleteApi,
  bargainStatusApi,
  exportBargainApi,
  toupiaoxiang,
  tanchuangList,
  toupiaoshen,
  toupiaorendelect,
  toupiaorenxiu,
  toupiaorenadd
} from "@/api/marketing";
export default {
  name: "index",
  components:{userList},
  data() {
    return {
      loading:false,
      tableFrom: {
        page: 1,
        limit: 10,
        keywords: "",
        status: ""
      },
      tableFromLog: {
        page: 1,
        limit: 10,
        oid: null
      },
      tableDataLog: {
        data: [],
        total: 0
      },
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      switchData: [],
      id: "",
      dialogTableVisible: false,
      LogLoading: false,
      baoming:false,
      formExtension:{
      },
      userVisible:false,
      ruleInline:{
         image:[{ required: true, message: '请选择用户', trigger: 'blur' }],
         name:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
         rules:[{ required: true, message: '请输入个人宣言', trigger: 'blur' }],
         userimage:[{ required: true, message: '请选择投票显示头像', trigger: 'blur' }]
      },
      userimage:'',
      isphone:true,
      tijiaoshow:true,
      baomingxin:false,
      name:'',
      rules:'',
      phone:'',
      nid:'',
      status:'',
    };
  },
  mounted() {
    this.id = window.location.search.split("=")[1];
    this.getList();
  },
  methods: {

    //修改报名人信息
    xiugai(id){
      this.baomingxin=true
        console.log(id)
      this.name=id.name
      this.rules=id.content
      this.phone=id.phone
      this.nid=id.id
      this.userimage=id.cover
    },
    //删除报名用户
    delect(id){
       console.log(id)
        this.$confirm('此操作将永久删除该报名人信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          toupiaorendelect(id).then((res) => {
            console.log(res)
              this.$message.success('删除成功');
            this.getList()
            // this.tableData.data.splice(idx, 1) 
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //确定提交用户
    onSubExtension(name){
      this.$refs[name].validate((valid) => {
        console.log("555",valid)
        if(valid){
          let parmas={
        voteId:this.id,
        uid:this.formExtension.spreadUid,
        name:this.formExtension.name,
        content:this.formExtension.rules,
        cover:this.userimage,
        phone:this.formExtension.phone
      }
      console.log(parmas)
      toupiaorenadd(parmas).then((res)=>{
        console.log("报名",res)
        if(res){
          this.baoming=false
          this.formExtension={}
          this.userimage=''
          this.getList();
          this.$message.success("报名成功");
        }
      })
        }
         
      })
      
    },
    //修改报名人
    onSubExtensionxiu(name){
        if(!this.name){
            return this.$message.error("请输入用户名");
        }
        if(!this.rules){
          return this.$message.error("请输入用户宣言");
        }
          let parmas={
        id:this.nid,
        name:this.name,
        content:this.rules,
        phone:this.phone,
        cover:this.userimage
      }
      console.log(parmas)
      toupiaorenxiu(parmas).then((res)=>{
        console.log("报名",res)
        if(res){
          this.baomingxin=false
          this.name=''
          this.phone=''
          this.rules=''
          this.userimage=''
          this.getList();
          this.$message.success("修改成功");
        }
      })

    },
    //新增报名
    xinzeng(){
      this.baoming=true
    },
    handleCloseExtension(){
        this.baoming = false
        this.isphone=false
        this.formExtension={}
        this.userimage=''
      },
    //选择会员
    getTemplateRow(row){
      console.log(row)
         this.formExtension.image = row.avatar
         this.formExtension.spreadUid = row.uid
         this.formExtension.phone=row.phone
        console.log("321",this.formExtension) 
      },
    //弹窗选择会员
    modalPicTap1(){
      this.userVisible=true
    },
    //选择投票个人图片
    modalPicTap(tit, num, i) {
        const _this = this
        this.$modalUpload(function (img) {
          console.log(img[0].sattDir)
          if (tit === '1' && !num) {
            _this.userimage= img[0].sattDir
            _this.formExtension.userimage='123'
          }
        }, tit, 'store')
        // console.log(_this.formExtension)
      },
    // modalPicTapfeng(tit){
    //   let that=this
    //   that.$modalUpload(function (img) {
    //     console.log(img[0].sattDir)
    //     that.formExtension.renfeng=img[0].sattDir
    //   }, tit, 'content')
    //   console.log("123",that.formExtension)
    // },
    //报名审核
    shenShow(id) {
      this.$confirm("是否同意该会员参与投票", "提示", {
        confirmButtonText: "同意",
        cancelButtonText: "拒绝",
        type: "warning"
      })
        .then(() => {
          let parmas = {
            voterId: id,
            status: 1
          };
          toupiaoshen(parmas).then(res => {
            console.log(res);
            this.$message.success("审核成功");
            this.getList();
            // this.tableData.data.splice(idx, 1)
          });
        })
        .catch(() => {
          let parmas = {
            voterId: id,
            status: 2
          };
          toupiaoshen(parmas).then(res => {
            console.log(res);
            this.$message({
              type: "success",
              message: "已拒绝该会员本次报名"
            });
            this.getList();
            // this.tableData.data.splice(idx, 1)
          });
        });
    },
    seachList() {
      this.tableFrom.page = 1;
      this.getList();
    },
    // tiaozhuan(){
    //     this.$router.push('/creattou')
    // },
    //导出
    exportList() {
      exportBargainApi({
        keywords: this.tableFrom.keywords,
        status: this.tableFrom.status
      }).then(res => {
        window.open(res.fileName);
      });
    },
    // 查看详情
    handShow(id) {
      console.log(id);
      this.tableFromLog.page = 1;
      this.dialogTableVisible = true;
      this.tableFromLog.oid = id;
      this.getxiangList();
    },
    onchangeIsShow(row) {
      bargainStatusApi({ id: row.id, status: row.status })
        .then(async () => {
          this.$message.success("修改成功");
          this.getList();
        })
        .catch(() => {
          row.status = !row.status;
        });
    },
    // 列表
    getList(num) {
      console.log(this.tableFrom)
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      let params = {
        voteId: this.id,
        current: this.tableFrom.page,
        size: 10,
        status:this.tableFrom.status
      };
      toupiaoxiang(params)
        .then(res => {
          console.log("成功", res);
          this.tableData.data = res.records;
          this.tableData.total = res.total;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList();
    },
    add() {
      this.isCreate = 0;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogTableVisible = false;
      window.location.reload();
      this.tableFromLog.page = 1;
      this.tableDataLog.data = {};
      location.reload();
    },
    //弹窗分页
    handleSizeChangeLog(val) {
      console.log("tanchuang",val)
      this.tableFromLog.limit = val;
      this.getxiangList();
    },
    //弹窗分页
    pageChangeLog(page) {
      console.log("dc",page);
      this.tableFromLog.page = page;
      this.getxiangList();
    },
    //弹窗列表查询
    getxiangList() {
      this.LogLoading = true;
      // this.tableFromLog.page = 1;
      let params = {
        voterId: this.tableFromLog.oid,
        current: this.tableFromLog.page,
        size: this.tableFromLog.limit
      };
      tanchuangList(params)
        .then(res => {
          this.tableDataLog.data = res.records;
          this.tableDataLog.total = res.total;
          this.LogLoading = false;
        })
        .catch(res => {
          this.LogLoading = false;
        });
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
  margin-top: 8px;
}
.pictrue{
  width: 100%;
  border: none;
}
.upLoadPicBox{
  width: 100%;
}
.touxiang{
  width: 60px !important;
  height: 60px !important;
  margin-right: 30px;
}
</style>
